<template>
  <div>
    <div class="topichead">
      <div class="user">
        <img :src="topicData.headImage " alt="userlogo" title="用户头像">
        <span class="nickname">{{topicData.contactName}}</span>
      </div>
      <div class="dropdown">
        <el-dropdown
          @command="handleSelect"
          trigger="click"
        >
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="topicData.source === 2" command="edit">编辑</el-dropdown-item>
            <el-dropdown-item command="toTop">置顶</el-dropdown-item>
            <el-dropdown-item command="jingPin">精品</el-dropdown-item>
            <el-dropdown-item command="isClose">关闭</el-dropdown-item>
            <el-dropdown-item command="isTopicDelete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <p class="topicMessage">{{topicData.content}}</p>
    <div class="picCan">
      <div class="topicPic">
        <div class="picItem" v-for="(i, index) in topicData.topicFileVoList " :key="index">
          <img v-lazy="i.urlM" :alt="i.name" :title="i.name">
        </div>
      </div>
    </div>
    <pc-dialog :width="350" :height="320" :is-show="showDialog" :title='title' @on-close="closeMask">
      <select-mask @on-close="closeMask" :topicData="topicData" :mask='mask' :opraId="{id: topicData.id, version: topicData.version}" />
    </pc-dialog>
  </div>
</template>
<script>
  import PcDialog from '../../../../../components/dialog/center.vue';
  import SelectMask from './selectMak.vue';
  export default {
    props: ['topicData'],
    data() {
      return {
        dialogTitle: ['请选择操作', '请选择删除原因'],
        mask: '',
        showDialog: false
      };
    },
    methods: {
      handleSelect (command) {
        if (command === 'edit') {
          this.$emit('toEdit', this.topicData);
          return;
        }
        this.mask = command;
        this.showDialog = true;
        // this.$router.repl
      },
      closeMask () {
        this.showDialog = false;
      }
    },
    computed: {
      title() {
        let arr = this.dialogTitle;
        let str = '';
        switch (this.mask) {
          case 'toTop':
          case 'jingPin':
          case 'isClose':
            str = arr[0];
            break;
          case 'isTopicDelete':
            str = arr[1];
            break;
          default:
            return str;
        };
        return str;
      }
    },
    components: {
      PcDialog,
      SelectMask
    }
  };
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .topichead{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    .user{
      padding: 20px 0;
      display: flex;
      align-items: center;
      img{
        width: 36px;
        height: 36px;
        border-radius: 18px;
      }
      .nickname{
        margin-left: 20px;
        font-size: 18px;
        font-weight: 500;
      }
    }
    .dropdown{
      .el-dropdown-link{
        color: #409eff;
      }
    }
  }
  .topicMessage{
    margin: 10px 0;
  }
  .picCan{
    width: 100%;
    overflow: hidden;
    .topicPic{
      width: 100%;
      overflow-x: auto;
      display: flex;
      padding-bottom: 10px;
      border-bottom: 2px dashed #eee;
      .picItem{
        width: 135px;
        height: 135px;
        margin-right: 25px;
        img{
          width: 135px;
          height: 135px;
          border-radius: 10px;
        }
      }
  }
  }
</style>